<template>
  <div id="main" style="width: 900px; height: 500px"></div>
</template>

<script>
const rankList = []
for (let i = 0; i < 6; i++) {
  rankList.push(Math.floor(Math.random() * (1000 - 200 + 1)) + 200)
}
// console.log('rankList', rankList)

export default {
  name: '',
  components: {},
  data() {
    return {}
  },
  create() {},
  mounted() {
    this.drawChart()
  },
  computed: {},
  methods: {
    drawChart() {
      // console.log('this', this)

      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart = this.$echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '从业人员接单量'
        },
        tooltip: {},
        // legend: {
        //   data: ['销量']
        // },
        xAxis: {
          data: ['小王', '小黑', '小绿', '小白', '小张', '小李']
        },
        yAxis: {},
        series: [
          {
            name: '单量',
            type: 'bar',
            data: rankList
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped></style>
